<template>
	<view class="content">
		<view style="position: relative;">
			<image class="bg" :src="$store.state.images.search_2" :style="{'height': bgHeight + 'px'}"></image>
		</view>
		<view class="title">
			<view>
				<text>浪特梦星梦圆镜片</text>
			</view>
			<view>
				<text>防伪验证</text>
			</view>
		</view>
		
		<view class="input-code">
			<input class="input" placeholder="请输入12位镜片防伪码" v-model="code"/>
			<!-- <image class="ic-scan" src="../../static/ic_scan.png" mode="widthFix" @click.stop="scan"></image> -->
		</view>
		<view class="input-tip">
			<text>
				为防止假冒产品复制扩散，验证码一次有效
			</text>
		</view>
		
		<view class="button" @click="check">
			<text>查询防伪结果</text>
		</view>
		
		<view class="button" @click="xmb">
			<text>星梦保历史记录查询</text>
		</view>
		<uni-popup ref="popupCheckResult" type="center" :isMaskClick="false">
			<checkResult
			></checkResult>
		</uni-popup>
	</view>
</template>

<script>
	import checkResult from '../../widgets/check_result.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			checkResult,
		},
		data() {
			return {
				code: '',
			}
		},
		methods: {
			scan() {
				let _this = this
				uni.scanCode({
					fail: (err) => {
						console.error(err)
					},
					success: (ret) => {
						console.log('scan ret', ret)
						const { result } = ret;
						_this.code = result;
					}
				})
			},
			check() {
				if (!this.code.trim()) {
					uni.showToast({
						title: '请输入防伪码',
						icon: 'none'
					})
					return
				}
				this.$store.dispatch('SecurityCodeCheck', this.code.trim())
			},
			xmb() {
				uni.navigateTo({
					url:'/pages/home/xmb',
				})
			},
		},
		watch: {
			checkResult(val) {
				if (val) {
					this.$refs.popupCheckResult.open();
				} else {
					this.$refs.popupCheckResult.close();
				}
			}
		},
		computed: {
			...mapState(['checkResult', 'screenWidth']),
			bgHeight() {
				return this.screenWidth * 217 / 428;
			},
		}
	}
</script>

<style>
	.content {
		font-family: "yshst" !important;
		display: flex;
		flex-direction: column;
	}
	.bg {
		width: 100vw;
		height: auto;
	}
	.title {
		font-size: 45rpx;
		margin-top: -160rpx;
		position: relative;
		padding: 0 35rpx;
	}
	.input-code {
		height: 70rpx;
		background-color: white;
		border-radius: 100rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
		margin-left: 35rpx;
		margin-right: 35rpx;
		margin-top: 140rpx;
	}
	.input-code .input {
		flex: 1;
		/* background-color: red; */
		padding: 0 30rpx;
		height: 100%;
	}
	.input-code .ic-scan {
		width: 40rpx;
		height: 40rpx;
		padding: 10rpx 20rpx;
		margin-right: 5rpx;
	}
	.input-tip {
		font-size: 20rpx;
		color: #999999;
		margin: 20rpx 50rpx 10rpx 50rpx;
	}
	.button {
		height: 70rpx;
		width: 400rpx;
		align-self: center;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: "yshst" !important;
		color: white;
		margin-top: 80rpx;
	}
</style>
